<template>
	<view class="page-container">
		<!-- 1. 顶部导航栏 -->
		<view class="top-bar">
			<uni-icons type="left" size="24" @click="goBack"></uni-icons>
			<view class="search-bar-placeholder">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<text>搜索你要的宝贝</text>
			</view>
			<view class="top-actions">
				<uni-icons type="redo" size="24" style="margin-right: 15px;"></uni-icons>
				<view class="more-options">
					<uni-icons type="more-filled" size="24"></uni-icons>
					<!-- 徽标数字从 4 改为 2，与原截图右上角红点数字统一，但原代码中是2 -->
					<view class="notification-badge">4</view> 
				</view>
			</view>
		</view>

		<!-- 商品图片轮播容器 -->
		<view class="product-image-container" v-if="productLoaded && product && product.images && product.images.length > 0">
			<swiper class="product-image-swiper"
					:indicator-dots="false"
					:autoplay="product.images.length > 1"
					:interval="3000"
					:duration="500"
					circular
					@change="onSwiperChange">
				<swiper-item v-for="(image, index) in product.images" :key="index">
					<image class="swiper-image" :src="image" mode="aspectFill" @click="previewImage(index)"></image>
				</swiper-item>
			</swiper>
			<!-- 自定义指示器 (如: 1/3) -->
			<view class="custom-indicator" v-if="product.images.length > 1">
				{{ currentImageIndex + 1 }}/{{ product.images.length }}
			</view>
		</view>
		<!-- 占位图：无图片时显示 -->
		<view class="product-image-placeholder" v-else-if="productLoaded && (!product || !product.images || product.images.length === 0)">
			<text>暂无商品图片</text>
		</view>
		<!-- 占位图：加载中显示 -->
		<view class="product-image-placeholder" v-else-if="!productLoaded">
			<text>图片加载中...</text>
		</view>

		<!-- 3. 价格和人气 (调整到图片下方) -->
		<view class="price-info" v-if="productLoaded && product">
			<view class="price-section">
				<text class="price-symbol">¥</text>
				<text class="price-value">{{ product?.price }}</text>
				<text class="shipping-pickup" v-show="product?.isFreeShipping == 1">包邮</text>
				<text class="shipping-pickup divider" v-show="product?.isSelfPickup == 1">可自提</text>
			</view>
			<view class="engagement-stats">
				<text>{{product?.wantCount || 0}}人想要</text>
				<text style="margin-left: 5px;">{{product?.viewCount || 0}}浏览</text>
			</view>
		</view>
		
		<!-- 5. 商品标题和描述 (调整到价格下方) -->
		<view class="product-title-desc" v-if="productLoaded && product">
			<text class="title">{{ product?.title }}</text>
			<text class="description">{{ product?.description }}</text>
		</view>

		<!-- 4. 促销标签 -->
		<!-- <view class="promo-tag">
			# Mate70 上市, 出旧换新!
		</view> -->
		<!-- 6. 商品规格 -->
		<!-- <view class="product-specs">
			<view class="spec-item">
				<text class="spec-label">品牌</text>
				<text class="spec-value">Huawei/华为</text>
			</view>
			<view class="spec-item">
				<text class="spec-label">内存容量</text>
				<text class="spec-value">16GB</text>
			</view>
		</view> -->

		<!-- 2. 出租方信息 (调整到主商品信息下方) -->
		<view class="seller-info" v-if="productLoaded && product && product.seller">
			<image class="avatar" :src="product?.seller?.sellerAvatar" mode="aspectFill"></image>
			<view class="seller-details">
				<view class="seller-name-tag">
					<text class="name">{{ product?.seller?.sellerName }}</text>
					<text class="tag-l2">鱼小铺 L2</text> <!-- 保持L2，与原截图可能不同 -->
				</view>
				<text class="last-seen">3小时前来过 深圳</text> <!-- 保持示例数据 -->
			</view>
			<button class="follow-btn" size="mini">+ 关注</button>
		</view>

		<!-- 7. 配置选项卡片 (水平滚动) -->
		 <!--
		<scroll-view class="config-options-scroll" scroll-x="true">
			<view class="config-card" v-for="(item, index) in serverConfigs" :key="index">
				<view class="config-header">
					<text class="config-tag">{{item.tag}}</text>
					<text class="config-name">{{item.name}}</text>
				</view>
				<text class="config-desc">{{item.description}}</text>
				<view class="config-detail-row">
					<text class="detail-label">CPU内存比</text>
					<text class="detail-value">{{item.cpuMemoryRatio}}</text>
				</view>
				<view class="config-detail-row">
					<text class="detail-label">vCPU数量范围</text>
					<text class="detail-value">{{item.vcpuRange}}</text>
				</view>
				<view class="config-detail-row">
					<text class="detail-label">主频/睿频</text>
					<text class="detail-value">{{item.frequency}}</text>
				</view>
				<view class="config-instance-dropdown">
					<text>实例规格 {{item.instance.name}} ({{item.instance.cores}}核 | {{item.instance.memory}}G)</text>
					<uni-icons type="bottom" size="14" color="#666"></uni-icons>
				</view>
				<view class="config-price-buy">
					<view class="config-price">
						<text class="price-val-usd">${{item.priceUSD}}</text>
						<text class="price-unit-usd"> USD/月 仅为实例规格参考价</text>
					</view>
					<button class="buy-config-btn" size="mini">租用</button>
				</view>
			</view>
		</scroll-view>-->

		<!-- 8. 担保交易和不喜欢 -->
		<view class="actions-feedback" v-if="productLoaded">
			<view class="guarantee-trade">
				<image src="/static/guarantee.png" class="guarantee-icon" mode="widthFix"></image>
				<text>担保交易</text>
			</view>
			<view class="dislike-btn">
				<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
				<text>不喜欢</text>
			</view>
		</view>
		
		<view class="divider-line" v-if="productLoaded"></view>

		<!-- 9. 附近的电脑服务器 -->
		 <!--
		<view class="nearby-items-section">
			<view class="nearby-header">
				<text class="nearby-title">附近的电脑服务器</text>
				<uni-icons type="right" size="16" color="#666"></uni-icons>
			</view>
			<view class="nearby-tag">共4个宝贝</view>
			
			<view class="nearby-items-grid">
				<view class="nearby-item" v-for="(item, index) in nearbyItems" :key="index">
					<image class="nearby-item-image" :src="item.image" mode="aspectFill"></image>
					<view class="nearby-item-info">
						<text class="nearby-item-distance">{{item.distance}}</text>
						<text class="nearby-item-location">{{item.location}}</text>
						<text class="nearby-item-price">¥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>-->


		<!-- 10. 底部操作栏 (悬浮) -->
		<view class="bottom-actions-bar">
			<view class="action-icon-group">
				<view class="action-icon-item">
					<uni-icons type="hand-up" size="22"></uni-icons>
					<text class="action-text">表态</text>
				</view>
				<view class="action-icon-item">
					<uni-icons type="chat" size="22"></uni-icons>
					<text class="action-text">1</text> <!-- 与原截图留言数量13不符，保持代码中1 -->
				</view>
				<view class="action-icon-item">
					<uni-icons type="star" size="22"></uni-icons>
					<text class="action-text">1</text>
				</view>
			</view>
			<view class="action-buttons">
				<button class="chat-btn">聊一聊</button>
				<button class="buy-now-btn">立即租用</button>
			</view>
		</view>
		
		<!-- 占位，防止底部内容被悬浮栏遮挡 -->
		<view style="height: 60px;"></view>

	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			productId: '',
			product: { // 初始化 product 为一个包含基本结构的对象
				title: '',
				description: '',
				images: [],
				price: 0,
				seller: {
					sellerAvatar: '',
					sellerName: ''
				}
			},
			productLoaded: false, // 标记商品数据是否加载完成
			currentImageIndex: 0, // 当前轮播图的索引
			serverConfigs: [
				// ... (保持不变)
			],
			nearbyItems: [
				// ... (保持不变)
			]
		}
	},
	async onLoad(e) {
		if(!e.productId){
			uni.showToast({ title: '缺少商品ID', icon: 'none' });
			setTimeout(() => uni.navigateBack(), 1500);
			return;
		}
		this.productId = e.productId;
		await this.productDetail(); // 使用 await 确保详情加载完毕
	},
	methods: {
		async productDetail() {
			this.productLoaded = false; // 开始加载，重置状态
			// 模拟API延迟
			// await new Promise(resolve => setTimeout(resolve, 1000));

			// --- 模拟API数据 ---
			// 您可以取消注释真实API调用，并注释掉这部分模拟数据
			let apiData = {
				id: this.productId,
				title: `商品 ${this.productId} - 高性能路由器`,
				description: `这是一款非常出色的商品 ${this.productId}，拥有最新的技术和稳定的性能，适合家庭和小型办公使用。`,
				price: (Math.random() * 200 + 150).toFixed(0),
				isFreeShipping: Math.random() > 0.4 ? 1 : 0,
				isSelfPickup: Math.random() > 0.6 ? 1 : 0,
				wantCount: Math.floor(Math.random() * 150) + 20,
				viewCount: Math.floor(Math.random() * 3000) + 500,
				seller: {
					sellerAvatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					sellerName: '何程程', // 与截图一致
				},
				images: [
					`https://picsum.photos/seed/${this.productId}_a/750/500`,
					`https://picsum.photos/seed/${this.productId}_b/750/500`,
					`https://picsum.photos/seed/${this.productId}_c/750/500`,
				]
			};
			// 特殊 productId 用于测试无图或单图情况
			if (this.productId === 'no_image_test') {
				 apiData.images = [];
			} else if (this.productId === 'single_image_test') {
				 apiData.images = [`https://picsum.photos/seed/${this.productId}_single/750/500`];
			}
			
			this.product = apiData;
			// 确保 images 字段即使在API未返回时也是一个空数组
			if (!this.product.images) {
				this.product.images = [];
			}
			this.currentImageIndex = 0; // 重置指示器
			this.productLoaded = true; // 数据加载完成
			console.log('Product loaded:', this.product);
			// --- 模拟API数据结束 ---


			// --- 原有的真实API请求逻辑 ---
			// try {
			//     const res = await app.globalData.Request.get(app.globalData.ApiConstant.Product.detail + '/' + this.productId, {});
			//     console.log('API Response:', res);
			//     if (res.success && res.data) {
			//         this.product = { ...res.data, images: res.data.images || [] }; // 合并并确保images是数组
			//         this.currentImageIndex = 0;
			//     } else {
			//         uni.showToast({ title: res.message || '获取商品详情失败', icon: 'none' });
			//         this.product = { title: '商品加载失败', images: [], price: 'N/A', seller: {} };
			//     }
			// } catch (err) {
			//     console.error('API Error:', err);
			//     uni.showToast({ title: '网络请求错误', icon: 'none' });
			//     this.product = { title: '网络错误', images: [], price: 'N/A', seller: {} };
			// } finally {
			//     this.productLoaded = true; // 无论成功失败，加载过程结束
			//     if (!this.product.images || this.product.images.length === 0) {
			//        this.currentImageIndex = 0; 
			//     }
			// }
		},
		onSwiperChange(e) {
			this.currentImageIndex = e.detail.current;
		},
		previewImage(index) {
			if (this.product && this.product.images && this.product.images.length > 0) {
				uni.previewImage({
					urls: this.product.images,
					current: index,
					loop: true
				});
			}
		},
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding: 0; // 顶部导航栏和底部操作栏通常是全宽的，内边距由各区块自行控制
	box-sizing: border-box;
}

/* 1. 顶部导航栏 */
.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px; 
	background-color: #fff; 
	position: sticky; 
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.search-bar-placeholder {
	flex-grow: 1;
	background-color: #f0f0f0;
	border-radius: 15px;
	padding: 5px 10px;
	margin: 0 10px;
	display: flex;
	align-items: center;
	color: #999;
	font-size: 14px;
	text {
		margin-left: 5px;
	}
}
.top-actions {
	display: flex;
	align-items: center;
}
.more-options {
	position: relative;
}
.notification-badge {
	position: absolute;
	top: -5px;
	right: -8px; // 调整位置以匹配截图
	background-color: red;
	color: white;
	border-radius: 50%;
	min-width: 16px; // 使用min-width确保数字显示完整
	height: 16px;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px; // 左右padding使圆形更饱满
	border: 1px solid white;
}

/* 商品图片轮播 */
.product-image-container {
	position: relative; // 为自定义指示器定位
	width: 100%;
	background-color: #e9e9e9; // 图片未加载时的背景色
}
.product-image-swiper {
	width: 100%;
	height: 375px; // 1:1的宽高比在750rpx宽的屏幕上，或根据设计稿调整
	// 例如，若图片是4:3，则 height: calc(100vw * 3 / 4);
}
.swiper-image {
	width: 100%;
	height: 100%;
}
.custom-indicator {
	position: absolute;
	bottom: 15px; // 调整位置
	right: 15px;  // 调整位置
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	padding: 4px 10px; // 调整padding
	border-radius: 15px; // 圆角更大
	font-size: 12px;
	z-index: 2; 
}
.product-image-placeholder {
    width: 100%;
    height: 375px; // 与swiper高度一致
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    color: #999;
    font-size: 14px;
}


/* 2. 出租方信息 */
.seller-info {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 15px 10px;
	border-radius: 8px;
	margin: 10px; // 上下左右都加margin
}
.avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 10px;
}
.seller-details {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.seller-name-tag {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	.name {
		font-weight: bold;
		font-size: 16px;
	}
	.tag-l2 {
		background-color: #409eff; 
		color: white;
		font-size: 10px;
		padding: 2px 5px;
		border-radius: 3px;
		margin-left: 8px;
	}
}
.last-seen {
	font-size: 12px;
	color: #666;
}
.follow-btn {
	background-color: #fff;
	border: 1px solid #ff5500;
	color: #ff5500;
	border-radius: 15px;
	padding: 0 10px;
	height: 28px;
	line-height: 28px;
	font-size: 13px;
	&::after {
		border: none; 
	}
}

/* 3. 价格和人气 */
.price-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 15px 10px; // 增加上下padding
	// margin-top: 1px; // 与图片模块紧密连接，如果图片模块有背景色
}
.price-section {
	display: flex;
	align-items: baseline;
	.price-symbol {
		color: #ff5500;
		font-size: 16px;
		font-weight: bold;
	}
	.price-value {
		color: #ff5500;
		font-size: 24px;
		font-weight: bold;
		margin-left: 2px;
	}
	.shipping-pickup {
		font-size: 12px;
		color: #666;
		margin-left: 8px;
		&.divider {
			padding-left: 8px;
			border-left: 1px solid #ccc;
		}
	}
}
.engagement-stats {
	font-size: 12px;
	color: #999;
}

/* 4. 促销标签 */
.promo-tag {
	background-color: #fff1e6; 
	color: #ff5500;
	padding: 8px 10px;
	font-size: 13px;
	border-radius: 5px;
	margin: 10px 10px 0 10px; //调整margin
	display: inline-block; 
}

/* 5. 商品标题和描述 */
.product-title-desc {
	background-color: #fff;
	padding: 10px 10px 15px 10px; // 调整padding
	// margin-top: 10px; // 如果price-info没有下边距
	// border-radius: 8px; // 如果独立成块
	.title {
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 8px;
		line-height: 1.4;
	}
	.description {
		font-size: 14px;
		color: #333;
		line-height: 1.5;
	}
}

/* 6. 商品规格 */
.product-specs {
	// ... (保持不变)
}

/* 7. 配置选项卡片 */
.config-options-scroll {
	// ... (保持不变)
}

/* 8. 担保交易和不喜欢 */
.actions-feedback {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	background-color: #f8f8f8; // 与页面背景一致
	.guarantee-trade {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #007aff; 
		.guarantee-icon {
			width: 20px; 
			height: 20px;
			margin-right: 5px;
		}
	}
	.dislike-btn {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #999;
		background-color: #eee;
		padding: 5px 10px;
		border-radius: 15px;
		text {
			margin-left: 3px;
		}
	}
}

.divider-line {
    height: 8px;
    background-color: #f0f0f0; 
    // margin: 0 -10px; // 如果page-container有padding，则不需要负margin
}

/* 9. 附近的电脑服务器 */
.nearby-items-section {
	// ... (保持不变)
}

/* 10. 底部操作栏 */
.bottom-actions-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
	z-index: 1000;
	padding-bottom: calc(8px + constant(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
	padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
	.action-icon-group {
		display: flex;
		align-items: center;
		.action-icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 18px;
			&:last-child {
				margin-right: 0; // 最后一个图标组项无右边距
			}
			.action-text {
				font-size: 10px;
				color: #666;
				margin-top: 2px;
			}
		}
	}
	.action-buttons {
		display: flex;
		button {
			border-radius: 18px;
			font-size: 14px;
			padding: 0 18px;
			height: 36px;
			line-height: 36px;
			margin-left: 8px;
			&::after {
				border: none;
			}
		}
		.chat-btn {
			background-color: #fff0e6; 
			color: #ff5500;
			border: 1px solid #ffedd9; // 可选，让按钮更柔和
		}
		.buy-now-btn {
			background: linear-gradient(to right, #ff8a00, #ff5500); // 渐变橙色
			color: white;
			border: none;
		}
	}
}
</style>